/* 
    一般情况下 项目的源代码都是写在 src文件夹中
    把源代码压缩成功之后放入 dist 文件夹中 把dist 文件上线即可

    gulpfile.js 用来写代码压缩文件

*/

let gulp = require("gulp");
let cssmin = require("gulp-cssmin");
let gulpBable = require("gulp-babel");
let jsmin = require("gulp-uglify");
let htmlmin = require("gulp-htmlmin");
let gulpclean = require("gulp-clean");

let webserver = require('gulp-webserver');

// 创建一个压缩的任务
function css() {
    return gulp
        .src("./css/**")
        .pipe(cssmin())
        .pipe(gulp.dest("./dist/css"));
}

function js() {
    return (
        gulp
        .src("./js/**")
        // 把es6 es7 的代码转换为es5 的代码
        .pipe(
            gulpBable({
                presets: ["env"],
            })
        )
        //在进行压缩
        .pipe(jsmin())
        .pipe(gulp.dest("./dist/js"))
    );
}

// 压缩HTML任务
// 压缩HTML的需要的插件 gulp-htmlmin
// 在gulpfile.js 中导入gulp-htmlmin
function html() {
    return gulp
        .src("./html/**")
        .pipe(
            htmlmin({
                collapseWhitespace: true, // 表示去除空格
                removeEmptyAttributes: true, // 移出空的属性
                minifyCSS: true, // 压缩 style 标签
                minifyJS: true, // 压缩 script 标签
            })
        )
        .pipe(gulp.dest("./dist/html"));
}

function jquery() {
    return gulp.src("./jquery/**").pipe(gulp.dest("./dist/jquery"));
}
// 创建一个复制静态子资源的任务
function img() {
    return gulp.src("./img/**").pipe(gulp.dest("./dist/img"));
}
function font() {
    return gulp.src("./font/**").pipe(gulp.dest("./dist/font"));
}
function scss() {
    return gulp.src("./scss/**").pipe(gulp.dest("./dist/scss"));
}
// 创建一个清楚缓存的代码
function clear() {
    return gulp.src(["./dist"]).pipe(gulpclean());
}

function web() {
    return gulp.src("./dist").pipe(
        webserver({
            host: "localhost", // 域名
            port: 3000, // 监听的端口号，统一写 3000
            open: "./html/personal.html", // 打开的页面，相对于 dist 文件夹来的目录
            livereload: true, // 浏览器自动刷新,
            // http://gz2107.com:90/MyPHP/student/api/add.php
            proxies: [{
                source: "/ap", //随便起，相当于你要请求接口的替换名 ajax请求时就用这个名字
                target: "http://gz2107.com:90/MyPHP/score/api", //需要请求的接口
            }],
        })
    );
}

// 创建一个实时监听的任务，当监听到某个文件夹中的文件发生改变的时候 自动帮我们执行build文件

function watch() {
    gulp.watch('./css', css);
    gulp.watch('./html', html);
    gulp.watch('./js', js);
    gulp.watch('./juqery', jquery);
    gulp.watch('./img', img);
    gulp.watch('./font', font);
    gulp.watch('./scss', scss);
}


// 必须要导出 只有导出之后 才能之后在命令行中执行这个任务 才会去执行压缩的代码
exports.css = css;
exports.js = js;
exports.html = html;
exports.jquery = jquery;
exports.img = img;
exports.font = font;
exports.scss = scss;
exports.clean = clear;
exports.web = web;
// exports.build = gulp.series(clear, css, js, html, data);

// 开启一个总任务帮助我们同时执行分任务
exports.build = gulp.series(clear, gulp.parallel(css, js, html, jquery,img,font,scss), web, watch);